/* * @Author: Yejing * @Date: 2023-06-19 15:51:39 * @LastEditors: Yejing * @LastEditTime: 2023-06-19 15:51:39 *
@Description: desc */
<template>
	<view class="com-container">
		<c-layout>
			<!-- 头部 -->
			<!-- 头部 -->
			<c-navigation-bar @inputEvent="inputEvent" :is-search="true" @searchEvent="searchEvent" searchBgcolor="#F6F7FB"
				:input="searchInput" @backEvent="$u.route('pages/storyType/storeManagement')"></c-navigation-bar>

			<!-- 模糊搜索列表 -->
			<!-- <view class="fuzzy-list" v-if="typeBox=='fuzzyList'">
			    <view class="line" v-for="(item,index) in fuzzyList" @click="fuzzyListClick(item.val)">
			        <u-icon name="search" color="#c8c9cc"></u-icon>
			        <view class="text">
			            {{ item.val }}
			        </view>
			    </view>
			</view> -->
			<view class="category" :style="{'bottom':bottomHeight}">
				<!-- 左 -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view class="scroll-y-item" v-for="(item, index) in leftLists" :key="item.id"
						:class="active === item.id ? 'active' : ''" @click="handleChange(item.id, index)">
						{{ item.name }}
					</view>
				</scroll-view>
				<!--右上 -->
				<view class="right-box">
					<scroll-view scroll-left="0" scroll-x="true" class="scroll-X">
						<view class="scroll-x-box">
							<view class="scroll-x-item" v-for="(item, index) in rightLists" :key="index"
								:class="active1 === item.id ? 'active' : ''" @click="handleChange1(item.id)">
								{{ item.name }}
							</view>
						</view>
					</scroll-view>
					<view class="container">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
							<view class="productBox" v-for="(item, index) in goodsList" :key="item.id">
								<view class="productBox_top">
									<view class="productBox-img">
										<u-image :src="$u.file.getMedieUrl(item.image)" style="height: 160rpx; width: 160rpx"></u-image>
										<view class="middle-box">
											<!-- 		<u-icon @click="confirm(item.id,'car')" name="shopping-cart" size="40"
												color="rgba(41, 52, 208, 1)" style="position: absolute;right: 0;"></u-icon> -->
											<uni-tooltip :content="item.name">
												<view class="productBox-tittle">
													{{ item.name }}
												</view>
											</uni-tooltip>
											<uni-tooltip :content="item.intro">
												<view class="productBox-intro">
													{{ item.intro }}
												</view>
											</uni-tooltip>
											<view class="productBox-price">
												<view class="">
													${{ item.priceMax }}
												</view>
												<!-- 进货按钮 -->
												<u-button type="primary" class="btn"
													@click="confirm(item.id,'go')">{{$t('orderDetails.Purchases')}}</u-button>
											</view>

										</view>

									</view>

								</view>

							</view>
						</scroll-view>


					</view>
				</view>
				<view class="gotocar" v-if="purchaseCart.length>0">
					<u-button type="primary" class="confir-btn"
						@click="$u.route('pages/storyType/storeManagement/purchaseCart')">{{$t('product.EnterCart')}}({{purchaseCart.length}}{{$t('home.item')}})</u-button>
				</view>
			</view>
			<!-- 打开商品详情 -->
			<!-- 	<u-popup v-model="show" mode="bottom" height="" border-radius="60">
				<view class="popop-box">
					<view class="productBox-img">
						<u-image :lazy-load="true" :src="$u.file.getMedieUrl(showList.h2ProductGoodsinfo.image)"
							@click="preview()"
							style="height: 160rpx; width: 160rpx"></u-image>
						<view class="middle-box">
							<uni-tooltip :content="showList.h2ProductGoodsinfo.name">
								<view class="productBox-tittle">
									{{ showList.h2ProductGoodsinfo.name }}
								</view>
							</uni-tooltip>
							<uni-tooltip :content="showList.h2ProductGoodsinfo.intro">
								<view class="productBox-intro">
									{{ showList.h2ProductGoodsinfo.intro }}
								</view>
							</uni-tooltip>
							<view class="productBox-price">${{showList.h2ProductGoodsinfo.priceMin?`${showList.h2ProductGoodsinfo.priceMin.toFixed(2)}-$${showList.h2ProductGoodsinfo.priceMax.toFixed(2)}`:0}}</view>
						</view>
					</view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: calc(100% - 460rpx); width: 100%">
						<view class="select-box">
							<view class="titleBox">
								<view class="title">
									{{$t('product.selectSpecifications')}}
								</view>
								<view class="btn" @click="show1=true">
									+
								</view>
							</view>
							
							<view class="titleBox" style="margin: 30rpx;" v-for="(item, index) in specificationList" :key="index">
								<view class="titleBox">
									<view class="">
										{{item.name}}
									</view>
									<view class="" style="margin-left: 40rpx;">
										${{item.price.toFixed(2)}}
									</view>
								</view>
								<view class="titleBox" style="margin-left: 20rpx;">
									<u-number-box class="capsule" type="capsule" :min="1" :value="item.count"
										@change="(val)=>numberBoxChange(val,index)" :input-width="154" :input-height="54">
									</u-number-box>
									<view class="btn" style="margin-left: 40rpx;" @click="deleteAtribulte(index)">
										-
									</view>
								</view>

							</view>
					
						</view>
					</scroll-view>
				
					<view class="purchase-bottom">
						<view class="purchase-count">
							<view class="text5">{{$t('home.total')}}({{ totalCount }} {{$t('home.item')}})</view>
							<view class="text6">${{ totalPrice }}</view>
						</view>
						<view class="pay-btn">
							<u-button type="primary" class="custom-style"
								@click="goGoodsDetail()">{{$t('orderDetails.payment')}}</u-button>
						</view>

					</view>
			
				</view>
			</u-popup> -->

			<!-- 进货 -->
			<u-popup v-model="show" mode="bottom" height="" closeable :mask-close-able='false' border-radius="60">
				<view class="popop-box">

					<view class="productBox-img">
						<u-image :lazy-load="true" :src="$u.file.getMedieUrl(showList.h2ProductGoodsinfo.image)" @click="preview()"
							style="height: 120rpx; width: 120rpx" border-radius="20rpx"></u-image>
						<view class="middle-box">
							<view class="productBox-price">
								${{ showList.h2ProductGoodsinfo.priceMin }}~${{ showList.h2ProductGoodsinfo.priceMax }}</view>
							<view class="" style="color: #A8A8A8; font-size: 12px;margin-left: 10rpx;">
								{{$t('product.MOQ')}}:{{minNum}}{{$t('home.item')}}
							</view>
							<!-- 			<view class="discount" v-if="showPrice">{{$t('product.takeHomePrice')}}${{ showPrice }}</view> -->
						</view>
					</view>

					<view class="severMore">
						<view class="severTittle">
							<uni-icons type="checkbox" size="20" color="rgb(182, 182, 182)"></uni-icons>
							<view class="severName">{{$t('product.package1')}}</view>
						</view>

						<view class="severTittle">
							<uni-icons type="checkbox" size="20" color="rgb(182, 182, 182)"></uni-icons>
							<view class="severName">{{$t('product.fastDelivery')}}</view>
						</view>

						<view class="severTittle">
							<uni-icons type="checkbox" size="20" color="rgb(182, 182, 182)"></uni-icons>
							<view class="severName">{{$t('product.fastMoneyBack')}}</view>
						</view>
					</view>
					<view class="middle-box" style="margin:40rpx;font-weight: 900;color: #212121;line-height: 20px;">
						{{$t('product.specification') }}
					</view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 45%; width: 100%">
						<view class="select-box">

							<view class="select-size" v-for="(skuItem, index) in skuAttr" :key="skuItem.id">
								<view class="" style="display: flex;justify-content: space-between;;align-items: center;"
									v-if="skuItem.num>=minNum">
									<view class="" style="display: flex;margin-bottom: 32rpx">
										<u-checkbox @change="(val)=>sizeChecked(val,index)" :value="skuItem.check">
											<!-- {{item.name}} -->
										</u-checkbox>
										<view class="" style="width: calc(100% - 10px);">
											<view class="select1">{{ skuItem.name }}</view>
											<view class="" style="color: #A8A8A8;">
												${{skuItem.price}}|{{$t('product.residualInventory')}} {{skuItem.num}}
											</view>
										</view>

									</view>
									<view class="" style="display: flex;align-items: center;">
										<view class="">

											<u-number-box class="capsule" type="capsule" :min="minNum" :max="skuItem.num"
												v-model="skuItem.count" @change="(val)=>numberBoxChange(val)" :input-width="154"
												:input-height="54">
											</u-number-box>

										</view>
										<view class="" style="margin-left: 30rpx;text-align: center;">
											<view class="" @click="numberBoxChange(-5,index)">
												-
											</view>
											<view class=""
												style="width: 20px;height: 20px;line-height: 20px; background: #EEEEEE;border-radius: 15px 15px 15px 15px;font-size: 12px;">
												5
											</view>
											<view class="" @click="numberBoxChange(5,index)">
												+
											</view>
										</view>
									</view>

								</view>


								<view class="box">
									<!-- <view class="type"
										:class="[skuItem.active2 === skuType.id ? 'active' : '', skuType.optional ? 'optional' : '']"
										v-for="skuType in skuItem.options" :key="skuType.id"
										@click="skuType.optional ? selectAtribulte(skuType, index) : ''">
										{{ skuType.name }}
										<view class="oss" v-if="!skuType.optional">oos</view>
									</view> -->
								</view>

							</view>
							<view class="" v-if="skuAttr.filter(i => { return i.num>0 }).length==0">
									{{$t('product.specificationError') }}
							</view>
							<!-- <view class="titleBox" v-if="this.specificationList.length">
								<view class="">
									{{$t('storeManagement.quantity')}}
								</view>
								<u-number-box class="capsule" type="capsule" :min="minNum" v-model="count"
									@change="(val)=>numberBoxChange(val)" :input-width="154" :input-height="54">
								</u-number-box>

							</view> -->
						</view>
					</scroll-view>
					<!-- 			<u-button type="primary" class="confir-btn" v-if="popType=='go'"
						@click="goGoodsDetail()">{{$t('orderDetails.Purchases')}}</u-button> -->
					<view class="" style="display: flex;justify-content: space-between;">
						<u-button type="" style="background: #FFFFFF;color: #2934D0;" class="" @click="AddToCart()">{{$t('product.AddToCart')}}</u-button>
						<u-button type="primary" class="" @click="goGoodsDetail()">{{$t('product.GoToResult')}}</u-button>
					</view>

				</view>
			</u-popup>

			<view>
				<u-toast ref="uToast" />
			</view>

			<view class="">
				<u-loading mode="circle" color="default" :show="loading"></u-loading>
			</view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				OOS: 'OOS',
				group: {},
				showPrice: '',
				popType: '',
				active2: 0,
				minNum: uni.getStorageSync('purchaseMinNum'),
				showList: {
					price: 198,
					image: '',
					h2ProductGoodsinfo: { priceMin: 0 },
					options: [{
							selectName: 'selectColor',
							type: ['#D9CCCE', '#4D4A5D', '#222222', '#CCCCCC']
						},
						{
							selectName: 'selectSize',
							type: ['Ssss', 'Mmmm', 'Lfdd', 'XL', 'XXL']
						}
					]
				},
				skuAttributes: [],
				skuAttr: [],
				checkList: [],
				show: false,
				specificationList: [],
				changedSpecification: {},
				totalCount: 0,
				count: 1,
				totalPrice: 0,
				show1: false,
				//搜索分页
				currentPageS: 1,
				//产品分页
				currentPage: 1,
				//搜索框内容
				contentText: null,
				loading: false,
				goodsSku: '',
				goodsIdList: [],
				purchaseCart: [],
				active: 0,
				active1: 0,
				searching: false,
				//右下信息
				goodsList: [],
				//右边列表
				rightLists: [],
				//左边列表
				leftLists: [],
				//设置竖向滚动条位置
				scrollTop: 0,
				//输入框占位
				searchInput: {
					value: '',
					disabled: false,
					type: 'text',
					// maxlength: 10,
					navPlaceholder: 'search'
				},
				//显示盒子类型
				typeBox: 'searchList',
				//模糊列表
				fuzzyList: [{
						val: '防嗮衣'
					},
					{
						val: '休闲西装'
					},
					{
						val: '运动衣'
					}
				]
			};
		},
		computed: {
			bottomHeight() {
				if (this.purchaseCart.length > 0) {
					return '120px'
				} else {
					return '10px'
				}
			}
		},
		onReady() {
			let promiseCount = 0
			const handel= ()=>{
				uni.showLoading({mask:true})
				promiseCount ++
				console.log(promiseCount);
				if(promiseCount == 3){
					this.$nextTick(()=>{
						uni.showLoading({mask:true})
						setTimeout(()=>{
							uni.hideLoading()
							console.log('1111');
						}, 2000);
					})
				}
			}
			this.$u.get('/app/h2-shop-category/parent/0').then((res) => {
				// console.log(res);
				this.leftLists = res.data;
				this.active = res.data[0].id;
				handel()
				this.$u.get(`/app/h2-shop-category/parent/${this.active}`).then((r) => {
					// console.log(res);
					this.rightLists = r.data;
					this.active1 = r.data[0].id;
					this.getGoodsList(this.active1);
					handel()
				}).catch(handel)
				
				this.leftLists.unshift({ name: 'All', id: 108 });
			}).catch(handel)
			this.$u.post('/app/purchaseCart/getAllPage', {
				"pageNum": 1,
				"pageSize": 999
			}).then((res) => {
				this.purchaseCart = res.data.records
				handel()
			}).catch(handel)
		},


		methods: {
			showToast(title) {
				this.$refs.uToast.show({
					title: title,
					type: 'default '
				});
			},
			//是否选中该规格
			sizeChecked(val, index = 0) {
				this.$set(this.skuAttr[index], 'check', val.value);
				this.$forceUpdate()
				console.log(this.skuAttr[index])
			},
			//选择几件
			numberBoxChange(val, index = 0) {

				if (typeof(val) === 'number') {
					console.log(111)
					this.skuAttr[index].count += val
					if (this.skuAttr[index].count < this.minNum) {
						this.skuAttr[index].count = this.minNum
					}
					if (this.skuAttr[index].count > this.skuAttr[index].num) {
						this.skuAttr[index].count = this.skuAttr[index].num
					}
					this.$forceUpdate()
					console.log(this.skuAttr)
				} else {
					this.$set(this.skuAttr[index], 'count', val.value);
				}


			},


			selectAtribulte(op, index) {
				if (this.skuAttributes[index].active2 === op.id) {
					this.skuAttributes[index].active2 = '';
					delete this.group[op.attrId];
					delete this.showList.h2ProductGoodsinfo['selectDetail'];
				} else {
					this.group[op.attrId] = Number(op.id);
					this.skuAttributes[index].active2 = op.id;

					this.showList.h2ProductGoodsinfo['selectDetail'] +=
						`${this.skuAttributes[index].name}:${op.name},`;
				}


				if (Object.keys(this.group).length === this.skuAttributes.length) {
					this.specificationList = []
					let newArr = []
					newArr = this.skuAttr.filter(item => {
						return Object.entries(JSON.parse(item.skuAttribute))
							.toString() === (Object.entries(this.group).toString())
					})

					console.log(this.skuAttr.filter(item => {
						return Object.entries(JSON.parse(item
							.skuAttribute)).toString() === (Object.entries(this.group).toString())
					}))
					if (newArr.length) {
						console.log(newArr)
						let item = newArr[0]
						newArr[0].count = uni.getStorageSync('purchaseMinNum')
						this.count = uni.getStorageSync('purchaseMinNum')
						this.specificationList = [...this.specificationList, ...[newArr[0]]]
						this.showPrice = item.price;
						this.goodsSku = item.id;
						this.changedSpecification = newArr[0]
						this.showList.h2ProductGoodsinfo['selPrice'] = this.showPrice;
						this.showList.h2ProductGoodsinfo['goodsSku'] = this.goodsSku;
					} else {
						this.specificationList = []
						this.showPrice = 0;
						this.count = uni.getStorageSync('purchaseMinNum')
						this.showToast('out of store');
						this.changedSpecification = {}
						this.skuAttributes[index].active2 = '';
						this.goodsSku = '';
					}
				}

			},

			// 预览
			preview(index = 0) {
				// 调用uni.previewImage()方法,传递index
				let list = this.showList.h2ProductGoodsinfo.images.split(',')
				let list1 = []
				list.forEach(i => {
					list1.push(this.$u.file.getMedieUrl(i))
				})
				console.log(list)
				uni.previewImage({
					current: index,
					// 返回所有图片的url地址数组
					urls: list1
				});
			},
			// 选择规格
			addAtribulte() {
				if (!this.changedSpecification.id) {
					this.showToast(this.$t('product.selectSpecifications'));
					return false
				}
				this.totalCount = 0
				this.totalPrice = 0
				this.specificationList = [...this.specificationList, ...[this.changedSpecification]]
				let res = new Map()
				this.specificationList = this.specificationList.filter((a) => !res.has(a.id) && res.set(a.id, 1) && !res.has(a
					.name) && res.set(a.name, 1))
				this.specificationList.forEach(item => {
					if (!item.count) {
						item.count = uni.getStorageSync('purchaseMinNum')
					}
					this.totalCount += item.count;
					this.totalPrice += item.count * item.price;


				})
				this.totalPrice = this.totalPrice.toFixed(2)
				console.log(this.specificationList)
				this.show1 = false
			},
			deleteAtribulte(index) {
				this.specificationList.splice(index, 1)
				this.totalCount = 0
				this.totalPrice = 0
				this.specificationList.forEach((item) => {
					this.totalCount += item.count;
					this.totalPrice += item.count * item.price;

				});
				this.totalPrice = this.totalPrice.toFixed(2)
			},
			confirm(id, type) {
				this.popType = type
				this.show = !this.show;
				this.goodsSku = '';
				this.count = uni.getStorageSync('purchaseMinNum');
				this.group = {};
				this.specificationList = []
				this.changedSpecification = {}
				this.totalCount = 0
				this.totalPrice = 0
				this.$u.get(`/app/h2-shop-goodsinfo/prdouct/${id}`).then((r) => {
					this.showList = r.data;
					console.log(this.showList)
					this.showList.h2ProductGoodsinfo['selectDetail'] = '';
					this.showPrice = '';
					//sku属性
					this.skuAttributes = r.data.h2ProductSkuAttributeList.map((e) => ({
						...e,
						active2: ''
					}));
					this.skuAttr = r.data.h2ProductSkuList;
					this.group = {};
					this.skuAttr.forEach((i) => {

						let obj = JSON.parse(i.skuAttribute);
						i.count = this.minNum
						i.check = false
						for (var o in obj) {
							this.skuAttributes.forEach((k) => {
								k.options.forEach((j) => {
									if ((j.attrId == o) & (j.id == obj[o])) {
										j.optional = true;
									}
								});
							});
							console.log('键名：', o);
							console.log('键值：', obj[o]);
						}

					});
				});
			},
			//触底获取商品列表
			onreachBottom() {

				if (this.searching) {
					this.searchEvent(this.contentText, 2)
				} else {
					this.getGoodsList(this.active1)
				}
			},
			//二级分类列表
			getGoodsList(id) {
				this.loading = true;
				let data = {
					page: {
						size: 10,
						current: this.currentPage
					},
					data: {
						categoryTwoId: id,
						name: null
					}
				};
				this.$u.post(`/app/h2-shop-goodsinfo/page`, data).then((d) => {

					const nextDataList = d.data.records; // 假设接口返回数据格式为 { data: [...] }
					if (nextDataList.length > 0) {
						this.goodsList = this.goodsList.concat(nextDataList);
						this.goodsList.forEach((item) => {
							this.$set(item, 'ck', false);
							this.loading = false;
						});
						this.currentPage++;
					} else {
						uni.showToast({
							title: 'no more',
							icon: 'none'
						});
					}

				});
			},
			//输入内容发生变化触发此事件
			inputEvent(val) {
				if (val) {
					this.typeBox = 'fuzzyList';
				} else {
					this.typeBox = 'searchList';
				}
			},
			//搜索
			searchEvent(val, type) {
				if (type !== 2) {
					this.currentPageS = 1
				}
				this.active = 108
				this.active1 = null
				this.searching = true;
				if (this.currentPageS == 1) {
					this.goodsList = []
				}
				this.contentText = val;
				let data = {
					page: {
						size: 10,
						current: this.currentPageS
					},
					data: {
						categoryTwoId: null,
						name: val
					}
				};
				this.$u.post(`/app/h2-shop-goodsinfo/page`, data).then((d) => {
					const nextDataList = d.data.records; // 假设接口返回数据格式为 { data: [...] }
					if (nextDataList.length > 0) {
						this.goodsList = this.goodsList.concat(nextDataList);
						this.goodsList.forEach((item) => {
							this.$set(item, 'ck', false);
							this.loading = false;
						});
						this.currentPageS++;
					} else {
						uni.showToast({
							title: 'no more',
							icon: 'none'
						});
					}
				});

				//判断缓存是否有当前值

				this.typeBox = 'productList';
				// this.searchInput.value = '';清空输入框
			},
			//模糊列表点击
			fuzzyListClick(val) {
				this.searchEvent(val);
			},


			goGoodsDetail() {
				this.specificationList = this.skuAttr.filter(i => { return i.check })
				this.$set(this.showList.h2ProductGoodsinfo, 'specificationList', this.specificationList);
				if (this.specificationList.length > 0) {

					uni.navigateTo({
						url: `/pages/storyType/storeManagement/purchaseDetail?item=${encodeURIComponent(JSON.stringify(this.showList.h2ProductGoodsinfo))}`,
						animationType: 'slide-in-right',
						animationDuration: 300
					});

				} else {
					this.showToast(this.$t('product.selectSpecifications'));
				}
			},
			// 加入到购物车
			AddToCart() {
				this.specificationList = this.skuAttr.filter(i => { return i.check })
				if (this.specificationList.length > 0) {
					this.specificationList.forEach(i => {
						this.$u.post(`/app/purchaseCart/add`, {
							"productSkuId": i.id,
							"quantity": i.count
						}).then((d) => {
							this.$u.post('/app/purchaseCart/getAllPage', {
								"pageNum": 1,
								"pageSize": 999
							}).then((res) => {
								this.purchaseCart = res.data.records
							});
							this.$u.toast(this.$t('product.AddedToCart'));
							// this.show=false
						});
					})



				} else {
					this.showToast(this.$t('product.selectSpecifications'));
				}
			},
			handleChange(id, index) {
				this.searchInput.value = ''
				this.searching = false;
				this.currentPage = 1
				this.pageNumS = 1;
				this.active = id;
				this.active1 = null;
				if (!index) {

					let data = {
						page: {
							size: 10,
							current: this.currentPageS
						}
					};
					this.$u.post(`/app/h2-shop-goodsinfo/page`, data).then((d) => {
						this.goodsList = d.data.records;
						this.goodsList.forEach((item) => {
							this.$set(item, 'ck', false);
							this.loading = false;
						});

					});

				} else {

					this.$u.get(`/app/h2-shop-category/parent/${this.active}`).then((r) => {
						// console.log(res);
						this.rightLists = r.data;
						this.active1 = r.data[0].id;
						this.goodsList = []
						this.getGoodsList(this.active1);
					});
				}
			},
			handleChange1(index) {
				this.searchInput.value = ''
				this.searching = false;
				this.active1 = index;
				this.currentPage = 1
				this.pageNumS = 1;
				this.goodsList = []
				this.getGoodsList(index);
			},

		}
	};
</script>

<style lang="scss" scoped>
	/deep/ .uni-input-placeholder {
		color: #1b1d29;
		font-size: 28rpx;
		font-family: Helvetica;
	}

	/deep/.uni-tooltip-popup {
		color: #c9c9c9;
		background: #f5f6f8;
		max-height: 400rpx;
		overflow: auto;
		z-index: 999;
	}

	/deep/.uni-tooltip {
		width: 220rpx;
	}

	.gotocar {
		width: 100%;
		height: 40px;
		position: fixed;
		bottom: 0px;
		z-index: 999;
		padding: 55px;
		border-radius: 52rpx 52rpx 0 0;
		background: #fff;
		box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
	}

	.category {
		position: absolute;
		top: 100px;
		left: 0;
		right: 0;
		bottom: 20rpx;
		display: flex;

		.scroll-Y {
			width: 180rpx;
			height: 100%;

			.scroll-y-item {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				min-height: 120rpx;
				font-size: 26rpx;
				font-family: Helvetica;
				color: #1e2432;
				padding: 0 20rpx;
			}

			.active {
				color: #3b2be4;
			}
		}

		.right-box {
			padding-left: 24rpx;
			position: absolute;
			left: 180rpx;
			position: absolute;
			left: 180rpx;
			top: 0rpx;
			right: 0;
			bottom: 0;

			.scroll-X {
				height: 40px;
				position: absolute;
				left: 13rpx;
				top: 23px;

				.scroll-x-box {
					display: flex;

					.scroll-x-item {
						white-space: nowrap;
						margin-right: 16rpx;
						text-align: center;
						padding: 8rpx 24rpx;
						height: 56rpx;
						background: #f6f7fb;
						border-radius: 120rpx;
						color: #1e2432;
						font-size: 26rpx;
						font-family: Helvetica;
						box-sizing: border-box;
					}

					.active {
						color: #2934d0;
						border: 2rpx solid #2934d0;
						box-sizing: border-box;
					}
				}
			}

			.right-down {
				position: absolute;
				top: 100rpx;
				right: 0;
				left: 0;
				bottom: 0;
				overflow: auto;

				.tips {
					margin: 24rpx;
					font-weight: 400;
					font-size: 28rpx;
					font-family: Helvetica;
					color: #1e2432;
				}

				.detail {
					display: flex;
					flex-wrap: wrap;

					.img-box {
						margin: 11rpx;
						padding-left: 11rpx;

						.image {}

						.ttile {
							font-size: 24rpx;
							font-family: Helvetica;
							color: #999cad;
							text-align: center;
						}
					}
				}
			}

			.container {
				overflow: auto;
				background: #ffffff;
				position: absolute;
				top: 62px;
				right: 0;
				left: 0;
				bottom: 0;


				.productBox {
					background: #ffffff;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					opacity: 1;
					border: 1px solid #f2f3f5;
					margin: 20rpx;
					padding: 20rpx;

					.productBox_top {
						display: flex;
						position: relative;
						padding-bottom: 10px;
						justify-content: space-between;
						width: 100%;

						.productBox-img {
							display: flex;
							width: 100%;

							.middle-box {
								width: calc(100% - 160rpx);
								padding-left: 20rpx;



								.productBox-price {
									font-size: 30rpx;
									color: #000000;
									display: flex;
									justify-content: space-between;
									font-weight: 500;

									.btn {
										width: 72px;
										height: 24px;
										border-radius: 4px;
										background: rgba(41, 52, 208, 1);
										margin: 0;
										font-size: 24rpx;
									}
								}
							}

						}
					}
				}
			}
		}
	}

	.purchase-bottom {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		justify-content: space-between;
		background-color: #1b1d29;
		padding: 32rpx 44rpx 52rpx 50rpx;

		.text5 {
			color: #91909a;
			font-size: 28rpx;
		}

		.text6 {
			color: #91909a;
			font-size: 40rpx;
			font-weight: 400;
		}

		.custom-style {
			width: 380rpx;
			height: 100rpx;
			background: #2934d0;
			border-radius: 20rpx;
		}
	}

	.fuzzy-list {
		.line {
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #ededed;
			margin-bottom: 20rpx;
			display: flex;

			.u-icon {
				margin-right: 20rpx;
			}

			.text {
				width: calc(100% - 28rpx);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				display: inline-block;
			}
		}
	}

	.productBox-tittle {
		font-size: 30rpx;
		color: #000000;
		width: 220rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.productBox-intro {
		font-size: 24rpx;
		width: 220rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 20rpx 0 30rpx 0;
	}

	.popop-box {
		height: 932rpx;

		.productBox-img {
			// left: 50%;
			// top: 0;
			// right: 50%;
			// transform: translate(-50%, 0rpx);
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			// border: 1px solid #f2f3f5;
			margin: 40rpx;
			padding: 20rpx;
			display: flex;

			.middle-box {
				padding-left: 40rpx;
				width: calc(100% - 200rpx);
				display: flex;
				align-items: baseline;

				.productBox-price {
					font-size: 30rpx;
					color: #000000;
					font-weight: 500;
				}

				.discount {
					font-size: 28rpx;
					color: rgba(252, 61, 92, 1);
					font-weight: 500;
					margin-left: 10rpx;
				}

			}

		}

		.severMore {
			display: flex;
			align-items: center;
			margin: 32rpx 0;
			justify-content: space-around;
			background-color: rgb(242, 242, 242);
			border-radius: 8rpx;
			padding: 10rpx 16rpx;
			margin: 32rpx 40rpx;

			.severTittle {
				display: flex;
				align-items: center;
				margin-right: 16rpx;

				.severName {
					color: rgba(182, 182, 182, 1);
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
				}
			}
		}

		.select-box {
			padding: 0rpx 40rpx 40rpx 40rpx;

			.titleBox {
				display: flex;
				margin: 48rpx 0;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 30rpx;
					color: #000000;
				}

				.btn {
					width: 44rpx;
					height: 44rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 50%;
					border: 1px solid #000;
				}
			}

			.select-size {
				.select1 {
					font-size: 30rpx;
					font-weight: 400;
					color: #000000;
				}


				.box {
					display: flex;
					flex-wrap: wrap;

					.type {
						padding: 20rpx 20rpx;

						margin: 20rpx 20rpx 20rpx 0;

						border-radius: 8rpx;
						font-size: 24rpx;
						position: relative;
						height: 64rpx;
						background: rgba(242, 242, 242, 1);
						color: rgb(182, 182, 182);

						.oss {
							position: absolute;
							top: -12px;
							right: -6px;
							background: rgba(182, 182, 182, 1);
							width: 64rpx;
							text-align: center;
							font-size: 18rpx;
							color: #fff;
							height: 20px;
							line-height: 20px;
							border-radius: 10rpx;
						}
					}

					.optional {
						color: rgb(27, 29, 41);
						background: rgba(242, 242, 242, 1);
					}

					.active {
						color: #fff;
						background: #2934d0;
					}
				}

			}
		}

		.confir-btn {
			width: 380rpx;
			height: 100rpx;
			background: #2934d0;
			border-radius: 20rpx;
			display: flex;
			position: fixed;
			left: 50%;
			bottom: 20rpx;
			right: 50%;
			transform: translate(-50%, 0rpx);
		}
	}
</style>